<template>
	<div>
		<div class="tab">
			<ul>
				<li
					@click="toggle(index)"
					:class="currentIndex === index ? 'title active' : 'title'"
					:key="item.id"
					v-for="(item, index) in data"
				>
					{{ item.label }}
				</li>
			</ul>
			<!-- <div
				:class="
					currentIndex === index ? 'content show' : 'content hidden'
				"
				:key="item.id"
				v-for="(item, index) in data"
			>
				{{ item.content }}
			</div> -->
            <div class="content">
                {{ data[currentIndex].content }}
            </div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			currentIndex: 2,
			data: [
				{
					id: 1,
					label: "电视",
					content: "电视模块",
				},
				{
					id: 2,
					label: "冰箱",
					content: "冰箱模块",
				},
				{
					id: 3,
					label: "电脑",
					content: "电脑模块",
				},
				{
					id: 4,
					label: "洗衣机",
					content: "洗衣机模块",
				},
			],
		};
	},
	methods: {
		toggle(index) {
			this.currentIndex = index;
		},
	},
};
</script>
<style scoped>
ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid red;
}
.title {
	width: 200px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}
.title.active {
	background-color: orange;
}
.content {
	display: block;
}
.content.show {
	display: block;
}
.content.hidden {
	display: none;
}
</style>